<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约拍平台 - 消息</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }
        .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #ef4444;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .message-bubble-left {
            background-color: #f0f0f0;
            border-radius: 18px;
            padding: 8px 12px;
            max-width: 70%;
            margin-bottom: 8px;
            align-self: flex-start;
        }
        .message-bubble-right {
            background-color: #3b82f6;
            color: white;
            border-radius: 18px;
            padding: 8px 12px;
            max-width: 70%;
            margin-bottom: 8px;
            align-self: flex-end;
        }
        .tab-active {
            color: #3b82f6;
            border-bottom: 2px solid #3b82f6;
        }
    </style>
</head>
<body>
    <!-- 状态栏和导航栏将通过JS加载 -->
    
    <div class="pt-7 pb-20">
        <!-- 顶部标题栏 -->
        <div class="bg-white px-4 py-3 flex items-center justify-between sticky top-0 z-10 shadow-sm">
            <h1 class="text-lg font-bold">消息</h1>
            <div class="flex items-center space-x-4">
                <i class="fas fa-search text-gray-600"></i>
                <i class="fas fa-plus text-gray-600"></i>
            </div>
        </div>
        
        <!-- 标签页 -->
        <div class="bg-white border-b border-gray-200">
            <div class="flex">
                <div class="flex-1 py-3 text-center tab-active">聊天</div>
                <div class="flex-1 py-3 text-center text-gray-500">通知</div>
                <div class="flex-1 py-3 text-center text-gray-500">约拍</div>
            </div>
        </div>
        
        <!-- 消息列表 -->
        <div class="bg-white">
            <!-- 消息项1 -->
            <div class="flex items-center p-4 border-b border-gray-100">
                <div class="relative mr-3">
                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="avatar">
                    <div class="badge">3</div>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <div class="font-bold">张摄影</div>
                        <div class="text-xs text-gray-500">10:30</div>
                    </div>
                    <div class="text-sm text-gray-600 truncate mt-1">您好，关于您预约的日系写真约拍，我想确认一下时间...</div>
                </div>
            </div>
            
            <!-- 消息项2 -->
            <div class="flex items-center p-4 border-b border-gray-100 bg-blue-50">
                <div class="relative mr-3">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="avatar">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <div class="font-bold">李写真</div>
                        <div class="text-xs text-gray-500">昨天</div>
                    </div>
                    <div class="text-sm text-gray-600 truncate mt-1">照片已经修好了，请查收！[图片]</div>
                </div>
            </div>
            
            <!-- 消息项3 -->
            <div class="flex items-center p-4 border-b border-gray-100">
                <div class="relative mr-3">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="avatar">
                    <div class="badge">1</div>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <div class="font-bold">王大师</div>
                        <div class="text-xs text-gray-500">昨天</div>
                    </div>
                    <div class="text-sm text-gray-600 truncate mt-1">您好，我看了您的作品集，想约您拍一组婚纱照，请问...</div>
                </div>
            </div>
            
            <!-- 消息项4 -->
            <div class="flex items-center p-4 border-b border-gray-100">
                <div class="relative mr-3">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="avatar">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <div class="font-bold">陈影像</div>
                        <div class="text-xs text-gray-500">周一</div>
                    </div>
                    <div class="text-sm text-gray-600 truncate mt-1">谢谢您的约拍，期待下次合作！</div>
                </div>
            </div>
            
            <!-- 消息项5 -->
            <div class="flex items-center p-4 border-b border-gray-100">
                <div class="relative mr-3">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="avatar">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <div class="font-bold">赵光影</div>
                        <div class="text-xs text-gray-500">上周</div>
                    </div>
                    <div class="text-sm text-gray-600 truncate mt-1">您好，我是古风摄影师赵光影，看到您在平台上发布的约拍需求...</div>
                </div>
            </div>
        </div>
        
        <!-- 聊天界面 (默认隐藏，点击消息项后显示) -->
        <div class="fixed inset-0 bg-white z-50 hidden" id="chat-view">
            <!-- 聊天顶部 -->
            <div class="bg-white px-4 py-2 flex items-center sticky top-0 z-10 shadow-sm" style="margin-top: 28px;">
                <a href="#" class="text-gray-800 mr-4" id="back-to-messages">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <div class="flex items-center flex-1">
                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-8 h-8 rounded-full mr-2">
                    <div>
                        <div class="font-bold">张摄影</div>
                        <div class="text-xs text-gray-500">在线</div>
                    </div>
                </div>
                <div class="flex space-x-4">
                    <i class="fas fa-phone text-gray-600"></i>
                    <i class="fas fa-ellipsis-v text-gray-600"></i>
                </div>
            </div>
            
            <!-- 聊天内容 -->
            <div class="p-4 flex flex-col h-screen pb-20 pt-16 overflow-y-auto">
                <!-- 时间标记 -->
                <div class="text-xs text-gray-500 text-center my-2">今天 10:15</div>
                
                <!-- 对方消息 -->
                <div class="flex items-end mb-4">
                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-8 h-8 rounded-full mr-2">
                    <div class="message-bubble-left">
                        您好，关于您预约的日系写真约拍，我想确认一下时间，您是希望在本周六上午进行拍摄吗？
                    </div>
                </div>
                
                <!-- 我的消息 -->
                <div class="message-bubble-right">
                    是的，周六上午9点可以吗？地点在哪里呢？
                </div>
                
                <!-- 对方消息 -->
                <div class="flex items-end mb-4">
                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-8 h-8 rounded-full mr-2">
                    <div class="message-bubble-left">
                        9点没问题。地点在静安区某某路123号的网红咖啡厅，我会提前到场准备。
                    </div>
                </div>
                
                <!-- 对方消息 -->
                <div class="flex items-end mb-4">
                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-8 h-8 rounded-full mr-2">
                    <div class="message-bubble-left">
                        这是咖啡厅的位置，您可以提前看一下：
                        <img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Y2FmZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" class="w-full h-32 object-cover rounded mt-2">
                    </div>
                </div>
                
                <!-- 我的消息 -->
                <div class="message-bubble-right">
                    好的，我知道这个地方。请问需要准备什么服装吗？
                </div>
                
                <!-- 对方消息 -->
                <div class="flex items-end mb-4">
                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-8 h-8 rounded-full mr-2">
                    <div class="message-bubble-left">
                        您可以准备一套日常休闲服装和一套稍微正式一点的，我们会根据场景来选择。如果您有特别喜欢的服装也可以带上。
                    </div>
                </div>
                
                <!-- 我的消息 -->
                <div class="message-bubble-right">
                    明白了，谢谢您的建议！
                </div>
                
                <!-- 对方消息 -->
                <div class="flex items-end mb-4">
                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-8 h-8 rounded-full mr-2">
                    <div class="message-bubble-left">
                        不客气，期待周六见面！如果有任何问题随时联系我。
                    </div>
                </div>
            </div>
            
            <!-- 聊天输入框 -->
            <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2">
                <div class="flex items-center">
                    <button class="text-gray-500 px-2">
                        <i class="far fa-smile text-xl"></i>
                    </button>
                    <input type="text" placeholder="输入消息..." class="flex-1 border border-gray-300 rounded-full px-4 py-2 mx-2 focus:outline-none focus:border-blue-500">
                    <button class="text-gray-500 px-2">
                        <i class="fas fa-plus-circle text-xl"></i>
                    </button>
                    <button class="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center ml-2">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 加载组件
        document.addEventListener('DOMContentLoaded', function() {
            // 创建iOS状态栏
            const statusBar = document.createElement('div');
            statusBar.className = 'bg-black text-white h-7 flex items-center justify-between px-4 text-xs fixed top-0 left-0 right-0 z-50';
            statusBar.innerHTML = `
                <div>
                    <span>9:41</span>
                </div>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            `;
            document.body.prepend(statusBar);
            
            // 创建底部导航栏
            const bottomNav = document.createElement('div');
            bottomNav.className = 'fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 h-16 flex justify-around items-center px-2 z-10';
            bottomNav.innerHTML = `
                <a href="home.html" class="flex flex-col items-center text-gray-500">
                    <i class="fas fa-home text-xl"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="explore.html" class="flex flex-col items-center text-gray-500">
                    <i class="fas fa-compass text-xl"></i>
                    <span class="text-xs mt-1">发现</span>
                </a>
                <a href="publish.html" class="flex flex-col items-center">
                    <div class="bg-blue-500 text-white rounded-full w-12 h-12 flex items-center justify-center">
                        <i class="fas fa-plus text-xl"></i>
                    </div>
                </a>
                <a href="messages.html" class="flex flex-col items-center text-blue-500">
                    <i class="fas fa-comment text-xl"></i>
                    <span class="text-xs mt-1">消息</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center text-gray-500">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            `;
            document.body.appendChild(bottomNav);
            
            // 消息列表点击事件
            const messageItems = document.querySelectorAll('.flex.items-center.p-4');
            const chatView = document.getElementById('chat-view');
            const backButton = document.getElementById('back-to-messages');
            
            messageItems.forEach(item => {
                item.addEventListener('click', function() {
                    chatView.classList.remove('hidden');
                    bottomNav.classList.add('hidden');
                });
            });
            
            backButton.addEventListener('click', function(e) {
                e.preventDefault();
                chatView.classList.add('hidden');
                bottomNav.classList.remove('hidden');
            });
        });
    </script>
</body>
</html> 